<template>
	<div class="status">
		<div class="status-box">
			<div class="status-data" v-for="status in agentStatus" :key="status.id">
				<p class="text">
					<span class="no">{{ status.num }}</span>
					<span>{{ status.des }}</span>
				</p>
				<img :src="status.src" alt="" />
			</div>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		agentStatus: {
			type: Array,
			default: () => []
		}
	},
	computed: {}
};
</script>

<style lang="less" scoped>
.status {
	p {
		font-weight: 700;
		padding: 10px 0;
	}
	.status-box {
		display: flex;
		flex-wrap: wrap;

		color: #666;
		.status-data {
			margin: 10px;
			display: flex;
			justify-content: space-between;
			width: 190px;
			height: 110px;
			background: #fff;
			box-shadow: 0 4px 28px 0 rgba(0, 0, 0, 0.08);
			border-radius: 4px;
			position: relative;
			.no {
				padding: 10px;
				font-size: 24px;
			}
			.text {
				padding: 10px;
				display: flex;
				flex-flow: column;
				justify-content: space-around;
			}
			img {
				padding: 10px 10px 0 0;
				width: 60px;
				height: 60px;
			}
		}
	}
}
</style>
